import cls from "classnames"
import './index.scss'

function DailyTask(props) {
  const {data = [], title = ''} = props
  const sign = () => {
    console.log('sign')
    props.onClick()
  }

  const handleClick = action => {
    console.log('action', action)
  }

  return (
    <div className="DailyTask">
      <h4 className="title">{title}</h4>
      <ul>
        {data.map((d, i) => (
          <li key={d.label}>
            <div className="wrap">
              <i className={cls(d.icon, 'task-icon')}/>
              <div className="content">
                <p className="label">{d.label}</p>
                {d.type !== "progress" && <p className="gifts">
                  {d.gifts.map(g => <span className={cls('gift-icon', `gift-icon-${g.icon}`)}>{g.label}</span>)}
                </p>}
              </div>

              <button className="action-btn" onClick={handleClick.bind(this, d.action)}>Go</button>
            </div>

            {d.type === "progress" && (
              <div className="progress">
                <p className="gifts">
                  {d.gifts.map((g, gi) => <span className={cls('gift-icon', `gift-icon-${g.icon}`)}>
                    <span className={cls("progress-bar", {"progress-bar-done": gi < 2, "progress-bar-doing": gi < 3})} />
                    <span className="text">{g.label}</span>
                  </span>)}
                </p>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default DailyTask
